<template>
  <div class="signature">
    <template v-if="!isSignSucess">
      <h2>电力科技创新奖评审确认签名，请在5分钟内完成。</h2>
      <div class="signature-canvas" ref="canvas">
        <vue-esign ref="esign" :isCrop="isCrop" :lineWidth="lineWidth" :width="screenwidth" :height="screenHeight" :lineColor="lineColor" :bgColor.sync="bgColor" v-if="screenwidth"/>
      </div>
      <div class="signature-btns">
        <a-button type="primary" @click="handleReset">清空</a-button>
        <a-button type="primary" @click="handleGenerate">确认</a-button>
      </div>
    </template>
    <div class="sucess-tip" v-else>
      <p>您的签名成功, 请在电脑</p>
      <p>端查看！</p>
    </div>
  </div>
</template>

<script>
import {
    cxjcsPostQrcode
} from  "@/api/api";
import vueEsign from 'vue-esign'
  export default {
    name: "Signature",
    props: {},
    data() {
      return {
        lineWidth: 6,
        lineColor: '#000000',
        bgColor: '',
        screenwidth: 0,
        screenHeight: 0,
        isCrop: false, // 是否裁剪空白区域
        isSignSucess: false
      }
    },
    methods: {
      handleReset () {
        this.$refs.esign.reset()
      },
      handleGenerate () {
        this.isSignSucess = false
        this.$refs.esign.generate().then(res => {
          const { token, path } = this.$route.query || {}
          cxjcsPostQrcode({
            token,
            photo: res.substring(22)
          }, path).then(res=>{
              this.isSignSucess = true
              this.$message.success("签名保存成功！")
          }).catch(err => {
              this.isSignSucess = false
              this.$message.error("签名保存失败！")
          })
          console.log(res)
        }).catch(err => {
          this.$message.warning("请你填写签名后再保存！")
        })
      }
    },
    components: { vueEsign },
    mounted() {
      document.querySelector('html').style.fontSize = 'calc(100vw/375*100)'
      const screenwidth = this.$refs.canvas.offsetWidth
      const screenHeight = this.$refs.canvas.offsetHeight
      this.screenwidth = screenwidth
      this.screenHeight = screenHeight
    }
  }
</script>

<style lang="less" scoped>
.signature {
    height: 80vh;
    padding: 0.2rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.signature-canvas {
  border: 0.01rem solid #000;
  height: 35vh;
}
.signature-btns {
  padding: 0.2rem 0;
  display: flex;
  justify-content: space-around;
}
.sucess-tip p{
  color:#40a9ff;
  font-size: .30rem;
  line-height: .25rem;
  text-align: center;
}
</style>